<template>
  <div class="container bg-gray">
    <div class="invoice-items">
      <xd-datalist url="/api/invoice/list">

        <template slot-scope="scope">
          <router-link class="invoice-item" tag="div" v-for="item in scope.list" :key="item.id" :to="'/myinvoicedetail?id='+item.id"> 
            <div class="flex">
              <img src="../../assets/imgs/other/clock@2x.png" alt="" class="clock-icon">
              <div class="flex-con time-info">
                {{item.timeStr|parseTime}}
              </div>
              <div class="status">
                {{item.status|status}}
              </div>
              <img src="../../assets/imgs/other/invoicegt@2x.png" alt="" class="invoicegt-icon">
            </div>
            <div class="invoice-type">
              电子发票
            </div>
            <div class="invoice-desc flex">
              <div class="invoice-content flex-con">
                {{item.purchaser}}
              </div>
              <div class="invoice-money">
                {{item.money}}元
              </div>
            </div>
          </router-link>
        </template>

      </xd-datalist>
    </div>
    <div class="openbtn-before"></div>
    <div class="openbtn" @click="openInvoice">开具发票</div>
  </div>
</template>
<style scoped lang="scss">
  .openbtn-before {
    height: 1.1467rem;
  }

  .openbtn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.1467rem;
    line-height: 1.1467rem;
    background-color: #ff2a2a;
    text-align: center;
    font-size: 0.4267rem;
    color: #ffffff;
  }

  .invoice-item {
    padding: 0.4rem;
    margin-bottom: 0.24rem;
    color: #333333;
    background-color: #fff;
  }

  .clock-icon {
    width: 0.4267rem;
    height: 0.4267rem;
  }

  .invoice-type {
    font-size: 0.3467rem;
    color: #333333;
    padding-top: 0.4267rem;
    padding-bottom: 0.28rem;
  }

  .invoice-desc {
    color: #333333;
    font-size: 0.3467rem;
  }

  .status {
    font-size: 0.2933rem;
    color: #333333;
  }

  .invoice-money {
    font-size: 0.3733rem;
  }

  .invoicegt-icon {
    width: 0.1333rem;
    height: 0.28rem;
    margin-left: 0.2533rem;
  }

  .time-info {
    font-size: 0.2933rem;
    color: rgba(51, 51, 51, 0.58);
    padding-left: 0.2533rem;
  }

</style>

<script>
  //发票开票状态-1 :开票失败 ;   0：已开票；1:补打发票；2:作废发票；3:冲红发票；5:未开发票；99:开票中;100 :开票成功,已领取发票
  export default {
    methods: {
      openInvoice() {
        this.$router.push("/invoicelist");
      }
    },
    filters: {
      status(s) {
        return {
          '-1':'开票失败',
          '0':'已开票',
          '1':'补打发票',
          '2':'作废发票',
          '3':'冲红发票',
          '5':'未开发票',
          '99':'开票中',
          '100':'开票成功,已领取发票'
        }[s+'']
      }
    }
  };

</script>
